import React, { useCallback, useMemo, useState, useContext, useRef } from 'react';
import { BaseProps, AudioType } from '../../defined';
import { FPlayerContext } from '../../index';
import Progress from '../../common/progress/index';
import { useClickOutside } from '../../utils/click_outside';
import Lyric from '../lyric';
import FplayerPlayList from '../play_list/index';
import './index.scss';

const preCls = 'fplayer_modal';

interface FplayerModalProps extends BaseProps {
  volumePercent: number;
  currentTime: number; // 当前音乐进度，单位s
  playList: Array<AudioType>;
  historyAudioList: Array<AudioType>;
  onPlaySchemaChange: (schemaIndex: number) => any;
  onToggleDisableVolume: (isDisableVolume: boolean) => any; // 切换音量禁音、正常,true禁音
  onVolumeChange: (volumePercent: number) => any;
  toggleAudio: (isAutoToggle: boolean, newCurrentAudioIndex: number) => void; // 切换音乐
}
const FplayerModal: React.FC<FplayerModalProps> = (props: FplayerModalProps) => {
  const {
    themeColor = '',
    volumePercent = 100,
    currentTime = 0,
    playList = [],
    historyAudioList=[],
    onToggleDisableVolume,
    onVolumeChange,
    onPlaySchemaChange,
    toggleAudio
  } = props;
  const currentAudio = useContext(FPlayerContext);

  const [schemaIndex, setSchemaIndex] = useState(0);
  const [isDisableVolume, setDisableVolume] = useState(false); // 是否禁音,true为禁音
  const [isShowLyric, setIsShowLyric] = useState(false); // 是否显示歌词
  const playListIconRef = useRef(null);
  const {visible: isShowPlayList, setVisible: setIsShowPlayList, ref} = useClickOutside(false, playListIconRef);// 是否显示播放列表
  const [isShowVolumeContainer, setIsShowVolumeContainer] = useState(false);

  // 事件
  // 播放模式
  const handleTogglePlaySchema = useCallback(() => {
    let _schemaIndex;
    if (schemaIndex >= 2) {
      _schemaIndex = 0;
    } else {
      _schemaIndex = schemaIndex + 1;
    }
    setSchemaIndex(_schemaIndex);
    if (onPlaySchemaChange) {
      onPlaySchemaChange(_schemaIndex);
    }
  }, [schemaIndex, onPlaySchemaChange]);

  // 切换volume
  const handleDisableVolume = () => {
    setDisableVolume(!isDisableVolume);
    onToggleDisableVolume(!isDisableVolume);
  };

  const handleVolumeMouseEnter = useCallback(() => {
    setIsShowVolumeContainer(true);
  }, [isShowVolumeContainer]);

  const handleVolumeMouseLeave = useCallback(() => {
    setIsShowVolumeContainer(false);
  }, [isShowVolumeContainer]);

  // volume change
  const handleVolumeChange = (percent: number) => {
    if (onVolumeChange) {
      onVolumeChange(percent);
    }
    if (percent === 0) {
      setDisableVolume(true);
    } else {
      setDisableVolume(false);
    }
  };

  const handleIsPlayListClick = () => {
    setIsShowPlayList(!isShowPlayList);
  };

  // lyric
  const handleIsShowLricClick = () => {
    setIsShowLyric(!isShowLyric);
  };

  const closeLyricContainer = useCallback(() => {
    setIsShowLyric(false);
  }, []);

  // 获取播放模式图标,提示
  const getModalType = useMemo(() => {
    let icon = 'shunxubofang';
    let title = '顺序播放';
    switch (schemaIndex) {
      case 0:
        icon = 'shunxubofang';
        title = '顺序播放';
        break;
      case 1:
        icon = 'suijibofang';
        title = '随机播放';
        break;
      case 2:
        icon = 'danquxunhuan';
        title = '单曲循环';
        break;
    }
    return { icon, title };
  }, [schemaIndex]);

  const pModalCls = useMemo(() => {
    const _class = ['item iconfont', `fplayer-${getModalType.icon}`];
    return _class.join(' ');
  }, [getModalType]);

  const volumeCls = useMemo(() => {
    const _class = ['item iconfont volume', isDisableVolume ? 'fplayer-volume1' : 'fplayer-volume'];
    return _class.join(' ');
  }, [isDisableVolume]);

  const playListStyle = useMemo(
    () => ({
      color: isShowPlayList ? themeColor : ''
    }),
    [isShowPlayList]
  );
  const lyricStyle = useMemo(
    () => ({
      color: isShowLyric ? themeColor : ''
    }),
    [isShowLyric]
  );

  return (
    <div className={preCls}>
      <a href="#" className={pModalCls} title={getModalType.title} onClick={handleTogglePlaySchema} />
      <a
        ref={playListIconRef}
        href="#"
        className="item iconfont fplayer-bofangliebiao"
        title="播放列表"
        style={playListStyle}
        onClick={handleIsPlayListClick}
      />
      <a
        href="#"
        className="item iconfont fplayer-lyric"
        style={lyricStyle}
        title="歌词"
        onClick={handleIsShowLricClick}
      />
      <div
        className={`${preCls}_volume_wrap`}
        onMouseEnter={handleVolumeMouseEnter}
        onMouseLeave={handleVolumeMouseLeave}>
        <a href="#" className={volumeCls} title="音量" onClick={handleDisableVolume} />
        {isShowVolumeContainer ? (
          <div className={`${preCls}_volume_container`}>
            <Progress
              percent={volumePercent}
              vertical
              strokeWidth={4}
              strokeColor={themeColor}
              thumb
              hoverShowThumb
              allowClick
              allowDrag
              onChange={handleVolumeChange}
            />
          </div>
        ) : null}
      </div>
      <a href="https://gitee.com/fudaosheng/fplayer" className="item iconfont fplayer-github" title="代码仓库" />
      <Lyric
        isShow={isShowLyric}
        lyric={currentAudio?.lyric || ''}
        currentTime={currentTime}
        themeColor={themeColor}
        close={closeLyricContainer}
      />
      <FplayerPlayList
        _ref={ref}
        isShow={isShowPlayList}
        playList={playList}
        historyAudioList={historyAudioList}
        themeColor={themeColor}
        toggleAudio={toggleAudio}
      />
    </div>
  );
};

export default FplayerModal;
